<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信达数据中心运维管理自动化平台</title>
    <meta name="keywords" content="信达数据中心运维管理自动化平台">
    <meta name="description" content="信达数据中心运维管理自动化平台">
    <link rel="shortcut icon" href="../favicon.ico">
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/iconfont.css" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../../css/iconfont.css" rel="stylesheet">
    <link href="../../css/plugins/swiper/swiper.min.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <!-- Data Tables -->
    <link href="../../css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <style type="text/css">
        h5 {
            color: #009999;
        }

        .title {
            background-color: #ceecdd;
            padding: 2px 0;
            text-align: center;
            margin-bottom: 10px;
        }

        .warming-primary {
            color: #fff;
            width: 20px;
            height: 20px;
            text-align: center;
        }

        .des {
            margin-bottom: 10px;
        }

        .des .fr {
            font-size: 12px;
        }

        /*swiper */
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            padding: 50px 50px 20px;
            width: 100%;
            height: 100%;
            border-bottom: 1px solid #ccc;
            margin-bottom: 10px;
        }

        .swiper-slide {
            text-align: center;
            font-size: 12px;
            -webkit-align-items: center;
            align-items: center;
            padding: 0;
        }

        button.dim {
            margin-top: 10px;
            margin-bottom: 12px !important;
            margin-right: 0;
        }

        .gs {
            font-size: 12px;
        }

        .gs div {
            margin-bottom: 4px;
        }

        strong {
            display: block;
        }

        .modal-lg {
            width: 90% !important;
        }

        .inmodal .modal-header {
            padding: 0;
            background-color: #66b6b6;
        }

        .modal-header .close {
            margin-top: 6px;
            margin-right: 20px;
            font-size: 20px;
        }

        .nbu span {
            font-size: 14px;
            color: #fff;
        }

        .nbui .col-sm-3 {
            padding: 10px;
        }

        /* 时间 */
        .time,
        .other {
            display: inline-block;
            text-align: center;
            height: 60px;
            line-height: 60px;
        }

        .time {
            width: 22%;
            background: #36a9ce;
            color: #fff !important;
            font-size: 30px;
            font-weight: bold;
            border-radius: 10px;
        }

        .other {
            height: 60px;
            width: 15px;
        }

        .times2 span {
            margin: 5px;
        }

        .times2 .time {
            width: 19%;
        }



        /*雷达*/

        #clock {
            /*    position: absolute;
    top: 0;
    left: 0;
    right: 0;*/
            bottom: 0;
            margin: auto;
            width: 21em;
            height: 21em;
            border-radius: 50%;
            background: url('bg.png') no-repeat;
            background-size: cover;
        }

        #clock .hour {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 0.5em;
            /* 段粗细 */
            height: 16.4em;
            /* 段距中心的距离 */
            background: transparent;
            box-shadow: 0 -0.4em 0 -0.1em greenyellow, 0 0.4em 0 -0.1em greenyellow;
            transform: rotate(36deg);
        }

        .danger {
            box-shadow: 0 -0.4em 0 -0.1em red, 0 0.4em 0 -0.1em red;
        }

        #clock .hour:after,
        #clock .hour:before {
            display: block;
            content: "";
            position: absolute;
            height: inherit;
            width: inherit;
            background: inherit;
            box-shadow: inherit;
            backface-visibility: inherit;
        }

        #clock .hour:before {
            transform: rotate(36deg);
        }

        #clock .hour:after {
            transform: rotate(-36deg);
        }

        #clock .hour:nth-of-type(1) {
            transform: rotate(-72deg);
        }

        #clock .min:after,
        #clock .min:before {
            display: block;
            content: "";
            position: absolute;
            height: inherit;
            width: inherit;
            background: inherit;
            box-shadow: inherit;
            backface-visibility: inherit;
            z-index: 0;
        }

        #clock .min:before {
            transform: rotate(6deg);
        }

        #clock .min:after {
            transform: rotate(12deg);
        }

        #clock .min:nth-child(2) {
            transform: rotate(-36deg);
        }

        #clock .min:nth-child(3) {
            transform: rotate(-18deg);
        }

        #clock .min:nth-child(4) {
            transform: rotate(6deg);
        }

        #clock .min:nth-child(5) {
            transform: rotate(24deg);
        }

        #sec {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 2em;
            height: 2em;
            border-radius: 50%;
            z-index: 3;
        }

        #sec:before,
        #sec:after {
            display: block;
            content: "";
            position: absolute;
        }

        #sec:after {
            width: 0.18em;
            height: 10.6em;
            top: -9.5em;
            background: rgb(141, 216, 30);
            /* 表针颜色 */
            left: 0;
            right: 0;
            margin: 0 auto;
        }


        ol {
            position: relative;
            height: inherit;
            width: inherit;
        }

        ol li {
            counter-increment: customlistcounter;
            font-size: 1.4rem;
            display: inline-block;
            position: absolute;
            letter-spacing: -0.1em;
            color: #383838;
            text-align: center;
        }

        ol li:before {
            content: counter(customlistcounter) "";
        }

        ol li:nth-child(1),
        ol li:nth-child(2),
        ol li:nth-child(4),
        ol li:nth-child(5),
        ol li:nth-child(7),
        ol li:nth-child(8),
        ol li:nth-child(10),
        ol li:nth-child(11) {
            font-size: 0;
        }

        ol li:nth-child(3) {
            top: 6.95em;
            right: 2.4em;
        }

        ol li:nth-child(9) {
            top: 6.95em;
            left: 2em;
        }

        ol li:nth-child(6) {
            bottom: 2.1em;
            left: 7.06em;
        }

        ol li:nth-child(12) {
            top: 1.9em;
            left: 6.78em;
        }

        img{
            position: relative;
            left: 23%
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>业务综合视图</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <h5 class="ml30" style="font-weight: 700;">重点业务雷达<img src="../../img/leidaUpdate.png"></h5>
                            <div class="col-sm-4 bdr" style="background-color: rgba(0,0,0,0)">
                                <div id="clock">
                                    <div class="hour">
                                    </div>
                                    <div class="hour">
                                    </div>
                                    <div id="sec"></div>
                                </div>
                            </div>
                            <div class="col-sm-4 bdr pl30">
                                <div class="row mb30">
                                    <div class="row">
                                        <div class="col-sm-5">
                                            <h5>概述</h5>
                                            <div class="col-sm-12 gs" style="padding: 0">
                                                <div><span>名称：</span><span id="sys-name">IT基础系统</span></div>
                                                <div><span>负责人：</span><span id="pic-name">五名/王东</span></div>
                                                <div><span>状态：</span><span id="warn-level">三级警报</span></div>
                                            </div>
                                        </div>
                                        <div class="col-sm-7">
                                            <h5>运行时间</h5>
                                            <div class="col-sm-12 times1"
                                                style="position: relative; top:20px; left: -15px; padding: 0;">
                                                <span class="time day">20</span>
                                                <span class="other">天</span>
                                                <span class="time hour">12</span>
                                                <span class="other">时</span>
                                                <span class="time min">56</span>
                                                <span class="other">分</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <h5>核心组件24小时状态</h5>
                                </div>
                                <div class="row">
                                    <div class="col-sm-4 bdr">
                                        <div class="title">服务器</div>
                                        <div class="des"><span id="fwq">10.0.8.87</span><span
                                                class="fr warming-primary">56</span></div>
                                        <div class="des"><span>10.0.8.87</span><span
                                                class="fr warming-primary">56</span></div>
                                        <div class="des"><span>10.0.8.87</span><span
                                                class="fr warming-primary">56</span></div>
                                    </div>
                                    <div class="col-sm-4 bdr">
                                        <div class="title">中间件</div>
                                        <div class="des"><span id="zjz">10.0.8.81</span><span
                                                class="fr warming-primary">56</span></div>
                                        <div class="des"><span>10.0.8.87</span><span
                                                class="fr warming-primary">56</span></div>
                                        <div class="des"><span>10.0.8.87</span><span
                                                class="fr warming-primary">56</span></div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="title">数据库</div>
                                        <div class="des"><span id="sjk">10.0.8.84</span><span
                                                class="fr warming-primary">56</span></div>
                                        <div class="des"><span>10.0.8.87</span><span
                                                class="fr warming-primary">56</span></div>
                                        <div class="des"><span>10.0.8.87</span><span
                                                class="fr warming-primary">56</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="echarts" id="echarts-line"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>业务系统监控状态</h5>
                    </div>
                    <div class="ibox-content">
                        <!-- 每一行数据-->
                        <div class="row">
                            <div class="col-sm-8 bdr">
                                <div class="col-sm-2">
                                    <strong>业务系统</strong>
                                </div>
                                <div class="col-sm-10 swiper-container">
                                    <!-- Swiper -->
                                    <div class="swiper-wrapper">
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-primary dim" type="button"><i
                                                        class="fa fa-check fa-fw"></i></button></div>
                                            <div>财政部报表</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-primary dim" type="button"><i
                                                        class="fa fa-check fa-fw"></i></button></div>
                                            <div>附中组</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-primary dim" type="button"><i
                                                        class="fa fa-check fa-fw"></i></button></div>
                                            <div>会计管理</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-warning dim" type="button"><i
                                                        class="fa fa-warning fa-fw"></i></button></div>
                                            <div>集团合并报表</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-primary dim" type="button"><i
                                                        class="fa fa-check fa-fw"></i></button></div>
                                            <div>集团合并报表</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-danger dim" type="button"><i
                                                        class="fa fa-flash fa-fw"></i></button></div>
                                            <div>金融工具分类</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-primary dim" type="button"><i
                                                        class="fa fa-check fa-fw"></i></button></div>
                                            <div>内部评级系统</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-primary dim" type="button"><i
                                                        class="fa fa-check fa-fw"></i></button></div>
                                            <div>会计管理系统</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-primary dim" type="button"><i
                                                        class="fa fa-check fa-fw"></i></button></div>
                                            <div>附中组系统</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-primary dim" type="button"><i
                                                        class="fa fa-check fa-fw"></i></button></div>
                                            <div>会计管理系统</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-primary dim" type="button"><i
                                                        class="fa fa-check fa-fw"></i></button></div>
                                            <div>集团合并报表</div>
                                        </div>
                                    </div>
                                    <!-- Add Pagination -->
                                    <div class="swiper-pagination"></div>
                                    <!-- Add Arrows -->
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="echarts" id="echarts-bar2" style="height:180px;"></div>
                            </div>
                        </div>
                        <!-- 每一行数据-->
                        <div class="row">
                            <div class="col-sm-8 bdr">
                                <div class="col-sm-2">
                                    <strong>公用支持系统</strong>
                                </div>
                                <div class="col-sm-10 swiper-container">
                                    <!-- Swiper -->
                                    <div class="swiper-wrapper">
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-primary dim" type="button"><i
                                                        class="fa fa-check fa-fw"></i></button></div>
                                            <div>AD</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-primary dim" type="button"><i
                                                        class="fa fa-check fa-fw"></i></button></div>
                                            <div>DHCP</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-primary dim" type="button"><i
                                                        class="fa fa-check fa-fw"></i></button></div>
                                            <div>NTP服务器</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-warning dim" type="button"><i
                                                        class="fa fa-warning fa-fw"></i></button></div>
                                            <div>微软KMS服务器</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-primary dim" type="button"><i
                                                        class="fa fa-check fa-fw"></i></button></div>
                                            <div>证书管理系统</div>
                                        </div>
                                    </div>
                                    <!-- Add Pagination -->
                                    <div class="swiper-pagination"></div>
                                    <!-- Add Arrows -->
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="echarts" id="echarts-bar" style="height:180px;"></div>
                            </div>
                        </div>
                        <!-- 每一行数据-->
                        <div class="row">
                            <div class="col-sm-8 bdr">
                                <div class="col-sm-2">
                                    <strong>IT基础支持系统</strong>
                                </div>
                                <div class="col-sm-10 swiper-container" style="border-bottom: 1px solid #f2f2f2;">
                                    <!-- Swiper -->
                                    <div class="swiper-wrapper">
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-primary dim" type="button"><i
                                                        class="fa fa-check fa-fw"></i></button></div>
                                            <div>NBU备份系统</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-primary dim" type="button"><i
                                                        class="fa fa-check fa-fw"></i></button></div>
                                            <div>NETPAS</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-primary dim" type="button"><i
                                                        class="fa fa-check fa-fw"></i></button></div>
                                            <div>IMC</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-warning dim" type="button"><i
                                                        class="fa fa-warning fa-fw"></i></button></div>
                                            <div>堡垒机、前置机</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-primary dim" type="button"><i
                                                        class="fa fa-check fa-fw"></i></button></div>
                                            <div>Remedy(新)</div>
                                        </div>
                                        <div class="col-sm-2 swiper-slide">
                                            <div><button class="btn btn-danger dim" type="button"><i
                                                        class="fa fa-flash fa-fw"></i></button></div>
                                            <div>NSX</div>
                                        </div>
                                    </div>
                                    <!-- Add Pagination -->
                                    <div class="swiper-pagination"></div>
                                    <!-- Add Arrows -->
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="echarts" id="echarts-bar3" style="height:180px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框-->
    <div class="modal inmodal fade" id="change" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="ibox mg0">
                            <div class="modal-header">
                                <button type="button" class="close fa fa-close" data-dismiss="modal"></button>
                                <div class="ibox-title fl">
                                    <h5>重点业务雷达</h5>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-sm-4 bdr">
                                        <h5>运行时间</h5>
                                        <div class="times2 mt50 mb50">
                                            <span class="time day">20</span>
                                            <span class="other mr5">天</span>
                                            <span class="time hour">12</span>
                                            <span class="other">时</span>
                                            <span class="time min">56</span>
                                            <span class="other">分</span>
                                        </div>
                                        <div class="col-sm-12 mg10">
                                            <span class="col-sm-4 pd0">名称：</span>
                                            <span class="col-sm-8 pd0">NBU备份系统</span>
                                        </div>
                                        <div class="col-sm-12 mg10">
                                            <span class="col-sm-4 pd0">警报：</span>
                                            <span class="col-sm-8 pd0">一级警报</span>
                                        </div>
                                        <div class="col-sm-12 mg10">
                                            <span class="col-sm-4 pd0">负责人：</span>
                                            <span class="col-sm-8 pd0">张三</span>
                                        </div>
                                        <div class="col-sm-12 mg10">
                                            <span class="col-sm-4 pd0">责任人电话：</span>
                                            <span class="col-sm-8 pd0">15011003360</span>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 bdr pl30">
                                        <div class="row mb50">
                                            <div class="echarts" id="echarts-pie-modal" style="height:250px;"></div>
                                        </div>
                                        <div class="row nbu">
                                            <div class="col-sm-3">服务器</div>
                                            <div class="col-sm-1"><span class="warming-warming">56</span></div>
                                            <div class="col-sm-1"><span class="warming-danger">10</span></div>
                                            <div class="col-sm-1"><span class="warming-primary">11</span></div>
                                            <div class="col-sm-2 col-md-offset-2">正常</div>
                                            <div class="col-sm-1"><span class="warming-primary"></span></div>
                                        </div>
                                        <div class="row nbu">
                                            <div class="col-sm-3">数据库</div>
                                            <div class="col-sm-1"><span class="warming-warming">56</span></div>
                                            <div class="col-sm-1"><span class="warming-danger">10</span></div>
                                            <div class="col-sm-1"><span class="warming-primary">11</span></div>
                                            <div class="col-sm-2 col-md-offset-2">一般</div>
                                            <div class="col-sm-1"><span class="warming-warming"></span></div>
                                        </div>
                                        <div class="row nbu">
                                            <div class="col-sm-3">中间件</div>
                                            <div class="col-sm-1"><span class="warming-warming">56</span></div>
                                            <div class="col-sm-1"><span class="warming-danger">10</span></div>
                                            <div class="col-sm-1"><span class="warming-primary">11</span></div>
                                            <div class="col-sm-2 col-md-offset-2">严重</div>
                                            <div class="col-sm-1"><span class="warming-danger"></span></div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="row">
                                            <div class="echarts" id="echarts-line-modal" style="height:200px;"></div>
                                        </div>
                                        <div class="row">
                                            <div class="echarts" id="echarts-bar-modal" style="height:200px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ibox-title">
                    <h5>业务综合视图</h5>
                </div>
                <div class="modal-body" style="text-align: center">
                    <div id="tab-tabale1" class="tab-pane active">
                        <div class="panel-body">
                            <table class="table table-striped table-bordered table-hover dataTablesModal">
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>告警等级</th>
                                        <th>发生时间</th>
                                        <th>来源</th>
                                        <th>事件内容</th>
                                        <th>主机名称</th>
                                        <th>IP</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th>序号</th>
                                        <th>告警等级</th>
                                        <th>发生时间</th>
                                        <th>来源</th>
                                        <th>事件内容</th>
                                        <th>主机名称</th>
                                        <th>IP</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 基础js -->
    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../js/content.js?v=1.0.0"></script>
    <!-- 插件js -->
    <script src="../../js/plugins/echarts/echarts-all.js"></script>
    <!-- Data Tables -->
    <script src="../../js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="../../js/plugins/swiper/swiper.min.js"></script>
    <script src="../../js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <script src="../../js/leida.js"></script>
    <script type="text/javascript">
        $(function () {


            // 定时器更新数据，无用代码
            var sysNameList = ['业务系统', '公用支持系统', 'IT基础支持系统'];
            var picNameList = ['五名/王东', '张三/李四', '王五/赵六'];
            var warnLevelList = ['一级警报', '二级警报', '三级警报'];
            var fwqList = ['10.0.8.88', '10.0.8.89', '10.0.8.90'];
            var zjzList = ['10.0.8.81', '10.0.8.82', '10.0.8.83'];
            var sjkList = ['10.0.8.84', '10.0.8.85', '10.0.8.86'];
            var i;
            setInterval(function () {
                if (i < 2) {
                    i++;
                } else {
                    i = 0;
                }
                $("#sys-name").html(sysNameList[i]);
                $("#pic-name").html(picNameList[i]);
                $("#warn-level").html(warnLevelList[i]);
                $("#fwq").html(fwqList[i]);
                $("#zjz").html(zjzList[i]);
                $("#sjk").html(sjkList[i]);
            }, 2000);






            // 模态框
            $(".swiper-wrapper").on("click", ".swiper-slide", function (event) {



                // 弹窗折线图1
                var lineChart = echarts.init(document.getElementById("echarts-line-modal"));

                lineoption = {
                    title: {
                        text: '事件发展趋势图',
                        textStyle: {
                            fontSize: 14,
                            // x: 'center'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        smooth: true
                    }]
                };

                lineChart.setOption(lineoption);


                $('#change').on('shown.bs.modal', function () {
                    lineChart.resize()
                })




                // 柱状图
                var barChart = echarts.init(document.getElementById("echarts-bar-modal"));

                var baroption = {
                    title: {
                        text: '事件级别统计图',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['严重', '主要', '次要'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#999', // X轴及其文字颜色
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#999', // X轴及其文字颜色
                            }
                        }
                    }],
                    series: [{
                        name: '数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: [100, 320, 50],

                        itemStyle: {
                            //通常情况下：
                            normal: {
                                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params) {
                                    var colorList = ['#ff3333', '#ffcc33', '#ffff66']; //每根柱子的颜色
                                    return colorList[params.dataIndex];
                                }
                            },
                            //鼠标悬停时：
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };


                barChart.setOption(baroption);


                $('#change').on('shown.bs.modal', function () {
                    barChart.resize()
                })



                // 饼状图
                var pieChart = echarts.init(document.getElementById("echarts-pie-modal"));

                var pieoption = {
                    title: {
                        text: 'NBU备份系统组成信息',
                        textStyle: {
                            fontSize: 14,
                            // x: 'center'
                        }

                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical', // 'vertical'
                        x: 'left', // 'center' | 'left' | {number},
                        y: 'bottom', // 'center' | 'bottom' | {number}
                        left: 0,
                        top: '15%',
                        data: ['服务器', '数据库', '中间件']
                    },

                    grid: {
                        // top:"90%",
                        // left: '25%', //距离左边距
                        // right: '25%', //距离右边距
                        // bottom: '0%', //距离下边距
                    },
                    series: [{
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            { value: 335, name: '服务器' },
                            { value: 310, name: '数据库' },
                            { value: 234, name: '中间件' },
                        ],
                        itemStyle: {
                            normal: {
                                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params) {
                                    var colorList = ['#6666ff', '#00cccc', '#ff9999']; //每根柱子的颜色
                                    return colorList[params.dataIndex];
                                }
                            },
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };

                pieChart.setOption(pieoption);


                $('#change').on('shown.bs.modal', function () {
                    pieChart.resize()
                })






                $("#change").modal();


            })







            // 查看每一个按钮
            $(".table").click(function () {

            });



            // 表格
            $('.dataTablesModal').DataTable({
                " dom": "Bfrtip",
                // " dom": "Bfrtip",
                bLengthChange: false, //去掉每页显示多少条数据方法
                bFilter: false, //去掉搜索框方法三：这种方法可以,
                "ajax": '../../data/dt.json',
                "columns": [
                    { "data": "id1" },
                    { "data": "id2" },
                    { "data": "id3" },
                    { "data": "id4" },
                    { "data": "id5" },
                    { "data": "id6" },
                    { "data": "id7" },
                ]
            });







            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 8,
                spaceBetween: 30,
                // slidesPerGroup: 3,
                // loop: true,
                loopFillGroupWithBlank: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });



            // 折线图1
            var lineChart = echarts.init(document.getElementById("echarts-line"));

            lineoption = {
                title: {
                    text: '业务月事件统计',
                    textStyle: {
                        fontSize: 14,
                        // x: 'center'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    top: '10%',
                    data: ['告警总数', '严重告警', '告警']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '告警总数',
                    type: 'line',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '严重告警',
                    type: 'line',
                    stack: '总量',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '告警',
                    type: 'line',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                }
                ]
            };


            lineChart.setOption(lineoption);
            $(window).resize(lineChart.resize);






            // 柱状图
            var barChart = echarts.init(document.getElementById("echarts-bar"));

            var baroption = {
                title: {
                    text: '业务分组近一个月内的事件统',
                    textStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['严重', '主要', '次要'],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#999', // X轴及其文字颜色
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#999', // X轴及其文字颜色
                        }
                    }
                }],
                series: [{
                    name: '数量',
                    type: 'bar',
                    barWidth: '60%',
                    data: [100, 320, 50],

                    itemStyle: {
                        //通常情况下：
                        normal: {
                            //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params) {
                                var colorList = ['#ff3333', '#ffcc33', '#66ffff']; //每根柱子的颜色
                                return colorList[params.dataIndex];
                            }
                        },
                        //鼠标悬停时：
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };


            barChart.setOption(baroption);
            $(window).resize(barChart.resize);






            // 柱状图
            var barChart = echarts.init(document.getElementById("echarts-bar2"));

            var baroption = {
                title: {
                    text: '业务分组近一个月内的事件统',
                    textStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['严重', '主要', '次要'],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#999', // X轴及其文字颜色
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#999', // X轴及其文字颜色
                        }
                    }
                }],
                series: [{
                    name: '数量',
                    type: 'bar',
                    barWidth: '60%',
                    data: [15, 90, 200],

                    itemStyle: {
                        //通常情况下：
                        normal: {
                            //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params) {
                                var colorList = ['#ff3333', '#ffcc33', '#66ffff']; //每根柱子的颜色
                                return colorList[params.dataIndex];
                            }
                        },
                        //鼠标悬停时：
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };


            barChart.setOption(baroption);
            $(window).resize(barChart.resize);



            // 柱状图
            var barChart = echarts.init(document.getElementById("echarts-bar3"));

            var baroption = {
                title: {
                    // text: '业务分组近一个月内的事件统',
                    textStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['严重', '主要', '次要'],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#999', // X轴及其文字颜色
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#999', // X轴及其文字颜色
                        }
                    }
                }],
                series: [{
                    name: '数量',
                    type: 'bar',
                    barWidth: '60%',
                    data: [10, 52, 200],

                    itemStyle: {
                        //通常情况下：
                        normal: {
                            //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params) {
                                var colorList = ['#ff3333', '#ffcc33', '#66ffff']; //每根柱子的颜色
                                return colorList[params.dataIndex];
                            }
                        },
                        //鼠标悬停时：
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };


            barChart.setOption(baroption);
            $(window).resize(barChart.resize);
        })
    </script>
    <script>
        window.requestAnimFrame = (function () {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                function (callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
        })();

        //initialize the clock in a self-invoking function
        (function clock() {
            // var hour = document.getElementById("hour"),
            //     min = document.getElementById("min"),
            var sec = document.getElementById("sec");
            //set up a loop
            (function loop() {
                requestAnimFrame(loop);
                draw();
            })();
            //position the hands
            function draw() {
                var now = new Date(),//now
                    then = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0),//midnight
                    diffInMil = (now.getTime() - then.getTime()),// difference in milliseconds

                    h = (diffInMil / (1000 * 60 * 60)), //hours
                    m = (h * 60), //minutes
                    s = (m * 60); //seconds
                console.log(diffInMil)
                //rotate the hands accordingly
                sec.style.webkitTransform = "rotate(" + (s * 6) + "deg)";
                // hour.style.webkitTransform = "rotate(" + (h * 30 + (h / 2)) + "deg)";
                // min.style.webkitTransform = "rotate(" + (m * 6) + "deg)";
            }
        })();
    </script>
</body>

</html>